<%@page import="com.wanmait.cookBook.vo.CookType"%>
<%@page import="com.wanmait.cookBook.vo.Taste"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%String path =request.getContextPath();%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑菜谱:爱下厨</title>
<!-- ***********************    弹窗样式连接          ******************************* -->
<link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css">
<script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script>

<link rel="shortcut icon" href="https://static.meishichina.com/v6/img/lib/f.ico"/>
<link rel="apple-touch-icon" href="https://static.meishichina.com/v6/img/lib/wapico.png" />
<link rel="stylesheet" type="text/css" href="https://static.meishichina.com/v6/css/lib/all.css?v1=13">
<link rel="stylesheet" type="text/css" href="https://static.meishichina.com/v6/css/app/center/all.css?v1=2017-08-17">
<link rel="stylesheet" href="https://static.meishichina.com/v6/css/app/center/center_recipe3.css?v1=20200430">
<style>
.picsize{background:rgba(0,0,0,.7);right:3px;padding:7px;position:absolute;bottom:3px;z-index:111;border-radius:15px;line-height:60%;color:#fff;z-index:111}
.picsizes{background: rgba(255,66,66,.7)}
.picw{background:rgba(0,0,0,.7);color:#fff;cursor:default;font-size:12px;line-height:60%;padding:7px;position:absolute;right:3px;bottom:3px;text-decoration:none;border-radius:15px}
.picws{background:rgba(255,66,66,.7)}
.picw:hover{color:#fff;text-decoration:none}
.showpic{padding:5px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;line-height:60%;padding:7px;position:absolute;left:3px;bottom:3px;border-radius:15px;}
.showpic:hover{color:#fff}
.makedifficulty{display: inline-block;margin-right: 20px}
.needtime{display: inline-block}
.need_time span,.difficulty span{width: 40px;text-align: center}
</style>
</head>

<body>
<!-- 主框架 -->
<div class="w_main clear">
<!-- 右侧 -->
<div class="mod_right">
<div class="mr_edit mr_edit_center clear">
<!-- 导入在线编辑器js文件 -->
<!-- 在线编辑器的整个代码 -->
<script src="<%=path %>/front/ueditor2/ueditor.config.js"></script>
<script src="<%=path %>/front/ueditor2/ueditor.all.js"></script>、
<script src="<%=path %>/front/ueditor2/lang/zh-cn/zh-cn.js"></script>
<script src="<%=path %>/front/js/jquery-3.5.0.min.js"></script>
                       <!-- form表单开始 -->
<form method="post" enctype="multipart/form-data"  id="myform" action="<%=path%>/CreateCookServlet?action=upCook">          
<ul>
<li>
<label class="must">菜谱名称</label><br>
<input name="cookName" class="inputL" type="text" id="cookName" placeholder="请输入菜谱名">
</li>
<li>
<label class="must">成品图片</label><br>
<div class="J_upload">上传成品图
<input name="cookPicture" class="J_img" id="cookPicture" type="file" >
</div>
<span class="img_status" id="multi_cover_status"> </span>

<div id="cover" class="clear">
</div>
</li>

<li>
<textarea class="autosize" name="cookIntroduce" maxlength="500" placeholder="请输入菜谱介绍，最多输入500字"></textArea>
</li>

<li class="makedifficulty">
<label class="must">制作难度</label><br>
<!-- 隐藏域 -->
<input type="hidden" id="difficultyLevel" name="level" value="">
<div class="things_type1 clear difficulty">

<span data-value="1" class="on" >简单</span>
<span data-value="2"  >初级</span>
<span data-value="3"  >中级</span>
<span data-value="4"  >高级</span>
</div>
<!-- 给制作难度添加点击事件 -->
<script>
$(function(){
	  $(".things_type1 span").click(function(){
		    $(this).addClass('on').siblings().removeClass('on');
		    $(this).closest('li').find('input').val($(this).attr("data-value"));
		   
		  });
});

</script>
</li>



<li class="makedifficulty">
<label class="must">菜品口味</label><br>
<!-- 隐藏域 -->
<input type="hidden" id="taste" name="taste" value="">
<div class="things_type1 clear need_time">
<%ArrayList<Taste> allTaste=(ArrayList<Taste>)request.getAttribute("allTaste"); %>
<%for(Taste taste:allTaste){%>
		<span data-value="<%=taste.getId() %>" ><%=taste.getTasteName() %></span>	
<% 	
} 
%>
<!-- <span data-value="1" class="dian" >酸</span>
<span data-value="2"  >甜</span>
<span data-value="3"  >苦</span>
<span data-value="4"  >辣</span> -->
</div>
<!-- 给菜品口味添加加点击事件 -->
<script>
$(function(){
	  $(".things_type1 span").click(function(){
		    $(this).addClass('dian').siblings().removeClass('dian');
		    $(this).closest('li').find('input').val($(this).attr("data-value"));
		   
		  });
});

</script>
</li>


<li class="makedifficulty">
<label class="must">作品菜系</label><br>
<!-- 隐藏域 -->
<input type="hidden" id="type" name="cookType" value="">
<div class="things_type1 clear need_time">
<%ArrayList<CookType> allCookType=(ArrayList<CookType>)request.getAttribute("allCookType"); %>
<%for(CookType cookType:allCookType){%>
		<span data-value="<%=cookType.getId() %>" ><%=cookType.getCookTypeName() %></span>	
<% 	
} 
%>
<!--  <span data-value="1" class="dian2" >鲁菜</span>
<span data-value="2"  >川菜</span>
<span data-value="3"  >粤菜</span>
<span data-value="4"  >闽菜</span>
<span data-value="5"  >浙菜</span>
<span data-value="6"  >湘菜</span>
<span data-value="7"  >徽菜</span>
<span data-value="8"  >苏菜</span>
<span data-value="9"  >家常菜</span>-->
</div>
<!-- 给菜品口味添加加点击事件 -->
<script>
$(function(){
	  $(".things_type1 span").click(function(){
		    $(this).addClass('dian2').siblings().removeClass('dian2');
		    $(this).closest('li').find('input').val($(this).attr("data-value"));
		   
		  });
});

</script>
</li>


<li class="ingredient clear">
<label class="must">食材明细</label>
<span class="tip">（功能：支持添加多种食材）</span>

<blockquote>
<p><span>主料</span></p>
<div class="J_addDiv">

<input type="text"  class="liao"  placeholder="食材名" >
<input type="text"   class="yongliang" placeholder="用量" ">
<!-- 隐藏域 -->
<input type="hidden" name="liao" >
<input type="hidden" name="yongliang">
</div>
</blockquote>

</li>

<li  class="options clear">
<label class="">制作工艺</label><br>
<div class="options_box clear">
<div>
<input type="hidden" name="cuisine" value="0">
<a href="javascript:void(0);"><i></i></a>
<span title=""></span>
口味（非必选）
</div>
</div>
<div class="options_item clear">
<div>
<span value="1" class="taste" >炒</span>
<span value="2" class="taste">爆</span>
<span value="3" class="taste">熘</span>
<span value="4" class="taste">烹</span>
<span value="5" class="taste">炸</span>
<span value="6" class="taste">煮</span>
<span value="6" class="taste">炖</span>
<span value="6" class="taste">其他</span>
</div>
</div>
</li><!-- 给口味添加点击事件 -->
<script>
	$(function(){
		$(".taste").on("click",function(){
			$("#taste").val()=$(this).val();
			
		});
	});
</script>


<li class="step">
<label class="must">做法步骤</label><br>
<div id="dragsort">
<blockquote class="cp_block J_blockQ clear"  data-gif="0" data-id="7859470">


                 <!-- 在线编辑器的地方 -->
<textarea id="cookStep" name="cookStep" placeholder="请输入步骤说明" ></textarea>
<script>
//将文本域替换成在线编辑器 cookStep就是发送给servlet的内容
	$(function(){
		var items ={
				initialFrameWidth:1041,
				initialFrameHeight:250,
				toolbars:[['bold', 'horizontal',  'underline','source','fontfamily', 'fontsize', 'emotion' ,'spechars' ],['simpleupload',]]		
		};
		editor=UE.getEditor("cookStep",items);
		//有返回值 返回的就是在线编辑器
	});	
		
</script>

</blockquote>

 </div>

</li>

<li>
<label>小窍门</label><br>
<textarea name="tips" class="autosize" id="tips" maxlength="500" placeholder="最多输入500字(非必填)"></textarea>
</li>
</ul>
</div>
<!-- 发布菜谱和存草稿右侧滑动栏 -->
<div class="mr_edit mr_edit_fixed clear">
<input class="btn1" id="upbtn" type="submit" value="发布菜谱" >
<a href="<%=path%>/IndexServlet"><input class="btn1" id="upbtn"  value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;返回首页" ></a>
        
<div id="save_tip"></div>
</div>
 </form>  
 <!-- 发布完待审核事件 -->
 <script>
 $(function(){
 	<%String action=request.getParameter("action"); %>
 <%if("s".equals(action)){%>
	 swal("上传成功，待管理员审核！");
 <% } %>
 
 });
 </script>
 
 <!-- 表单的提交事件 -->
 <script>
 
 $(function(){
	 $("#myform").submit(function(){
	
		 //作品名不能为空
		 var cookName=$("#cookName").val();
		 if( cookName==""){
			 swal("请输入菜谱名");
			 return false;
		 }
		 //作品难度不能为空
		 var difficultyLevel=$("#difficultyLevel").val();                                         
		 	if(difficultyLevel==""){
		 		swal("请选择制作难度");
		 		return false;		 		
		 	}
		 //菜品口味不能为空 
		 var taste=$("#taste").val();
		 if(taste==""){
			 swal("请选择菜品口味");
			 return false;
		 }
		 //验证作品菜系不能为空
		 var cookType=$("#cookType").val();
		 if(cookType==""){
			 swal("请选择作品菜系");
			 return false;
		 }
		 //获得在线编辑器中间的内容 
		 var cookStep=editor.getContent();
		 if(cookStep==""){
			 swal("请输入步骤");
			 return false;
		 }
		 
		 //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		//获得食材所有文本框的值 集合
	     var str="";
	     var str1="";
	     var f=false;
	     var liaos=$(".liao"); //liaos是个集合 
	     liaos.each(function(){//循环体 liaos有多少个元素 就循环多少次   
	      var shiCai=$(this).val();
	      str=str+"&shiCai="+shiCai;//拼接:"cid=1&cid=2&cid=3"
	      
	     });
	     str = str.substring(1);//截取字符串   str中间的第一个字符&被截去 
	    //获得用量所有文本框的值放到集合 
		      var yongliangs=$(".yongliang"); 
		     yongliangs.each(function(){
		      var liang=$(this).val();
		      str1=str1+"&liang="+liang;   
		     });
		     //str1 = str1.substring(1);//截取字符串   str1中间的第一个字符&被截去 
		    if(cookName!=""&&difficultyLevel!=""&&cookStep!=""&&taste!=""){
		   
			     //Ajax
			     $.ajax({
			      url:"<%=path%>/FoodDetailsServlet",
			      type:"post", 
			      async:false,
			      data:"action=addFoodDetails&"+str+str1,
			      success:function(mes){
			          
			     }
			     });
		     }
	     
	     
	    });
	     ///////////////////////////////////////////////////////发布成功后返回自己这页
		 
		
	 });
 </script>
</div><!-- 右侧结束 -->
</div>
<script type="text/javascript" src="//static.meishichina.com/v6/js/lib/all.js?v1=20180922"></script>
<script type="text/javascript">
msc.user.init();
$("img.imgLoad").imgLoad();
</script>
<script type="text/javascript" src="//static.meishichina.com/v6/js/lib/jquery.dragsort.js"></script>
<script type="text/javascript" src="//static.meishichina.com/v6/js/lib/autosize.js"></script>


<script type="text/javascript" src="//static.meishichina.com/v6/js/app/center/center_recipe1.js?v1=20200316"></script>

<script>
$("li.top_bar_more").hoverDelay(function(){$("li.top_bar_more div").show()},function(){$("li.top_bar_more div").hide()},200,200);var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="//hm.baidu.com/hm.js?fb9cd9dcdda23cee0c7357db9be24acb";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s)})();
</script>
</body>
</html>

